<template>
  <div class="checkreg">
    <h1>{{ goodnews }}</h1>
    <!-- 这两句是为了测试表单验证插件而随手加上的 -->
    <input v-validate="'required|email'" name="email" type="text">
    <span>{{ errors.first('email') }}</span>
  </div>
</template>

<script>
export default {
  name: "checkreg",
  //原本是用props，也即是属性来等待别人给具体的内容，但是我们在这里换用了组件自身内部的data方法，在下面来提供数据
  //   props: {
  //     goodnews: String
  //   }
  //   或者也可以这样子来使用data
  // data:function(){
  //     return{
  //         goodnews: "这里是checkreg组件的统治区：666666"
  //     }
  // }
  data() {
    return {
      goodnews: "这里是checkreg组件的统治区：666666"
    };
  }
};
</script>

<!-- 在这里加上 "scoped" 属性，就意味着style标签里面的样式，只会对当前组件产生作用 -->
<style scoped>
h1 {
  color: #42b983;
}
span {
  color: chocolate;
}
</style>
